<template>
  <div>
    <a-input-search
        v-model="keyword"
        placeholder="请输入商品名称"
        enter-button="搜索商品"
        style="width: 400px;margin-bottom: 20px"
        size="large"
        @search="onSearch"
    />
    <a-button style="margin-left: 10px" size="large" type="danger" @click="reset">
      重置
    </a-button>
    <a-table :loading="loading" :columns="columns" :data-source="data" rowKey="id">
      <a slot="company" slot-scope="company">{{ company }}</a>
      <span slot="customTitle"><a-icon type="bank"/> 公司名称</span>
      <span slot="arrival" slot-scope="arrival">
        <a-tag :color="arrival === 0 ? 'red' : 'green'">{{ arrival === 0 ? '已到货' : '未到货' }}</a-tag>
      </span>
      <span slot="action" slot-scope="text, record, index">
        <a-button v-if="record.arrival === 1" type="link" @click="confirm(record)">到货</a-button>
      </span>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    dataIndex: 'company',
    key: 'company',
    slots: {title: 'customTitle'},
    scopedSlots: {customRender: 'company'},
  },
  {
    title: '打款帐号',
    dataIndex: 'number',
    key: 'number',
  },
  {
    title: '商品名称',
    dataIndex: 'cname',
    key: 'cname',
  },
  {
    title: '数量',
    dataIndex: 'count',
    key: 'count',
  },
  {
    title: '总计',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '预留电话',
    key: 'phone',
    dataIndex: 'phone',
  },
  {
    title: '开票时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '是否到货',
    dataIndex: 'arrival',
    key: 'arrival',
    scopedSlots: {customRender: 'arrival'},
  },
  {
    title: '更多操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  },
];

export default {
  data() {
    return {
      loading: false,
      data: [],
      columns,
      keyword: ''
    }
  },
  mounted() {
    this.loadTableData()
  },
  methods: {
    onSearch() {
      if (this.keyword === '') {
        this.$message.warning('请输入搜索内容')
      } else {
        this.loadTableData()
      }
    },
    reset() {
      this.keyword = ''
      this.loadTableData()
    },
    loadTableData() {
      this.loading = true
      this.getRequest('/api/sale/?name=' + this.keyword).then(resp => {
        if (resp) {
          if (this.keyword !== '' && resp.length === 0) this.$message.warning('未搜索到相关商品')
          this.loading = false
          this.data = resp
        }
      })
    },
    confirm(record) {
      this.$confirm('此操作将确认商品' + record.cname + '已送达, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.putRequest('/api/sale/', record).then(resp => {
          if (resp) {
            this.loadTableData()
          }
        })
      }).catch(() => {
        this.$message.info('取消操作')
      });
    },
  },
};
</script>

<style scoped>
.editable-add-btn {
  margin-bottom: 15px;
}
</style>